<template>
	<!-- 横向 -->
	<!-- <div class="pro-list" id='list02' > -->
	<div class="pro-box" @click="myEvent()" :style="{ '--themescolor': themes.color }">
		<div class="pro-info">
			<div class="pro-img ">
				<legend-image :pic="pic" :options="{ w: '175', h: '175' }" :class="'needsclick'" :isJD="parmas.prodSource == 'JD'" />
				<!-- <i class="type-tip" v-if="parmas.prodType == 'P'">普通商品</i> -->
				<i class="type-tip" v-if="parmas.prodType == 'G'">团购商品</i>
				<i class="type-tip" v-if="parmas.prodType == 'S'">二手商品</i>
				<i class="type-tip" v-if="parmas.prodType == 'D'">打折商品</i>
			</div>
			<div class="pro-name">{{ name }}</div>
			
			<!-- 我要上架页面 商品列表（onshelf.vue） -->
			<template v-if="source == 'onshelf'">
				<div class="pro-price">
					<span class="price">
						到手价：￥
						<em class="now">{{ Money(money)[0] }}</em>
						.{{ Money(money)[1] }}
					</span>
				</div>
				<div class="w-100 flex-center px-1 h-40p my-1" @click.stop>
					<div :class="`w-100 h-100 ${!parmas.onlineConfine || parmas.selected?'but-pe-none' :'but-main'} rounded-100`" @click.stop="toShelf(parmas)">{{ butText }}</div>
				</div>
			</template>
			<template v-else>
				<div class="pro-price">
					<span class="price">
						￥
						<em class="now">{{ Money(money)[0] }}</em>
						.{{ Money(money)[1] }}
					</span>
					<span v-if="isShowDis" class="dis" v-for="(item, index) in parmas.description" :key="index">{{ item }}</span>
					<span class="cat" :style="{ background: themes.color }"><img src="../../assets/images/goodCar.png" alt="" /></span>
				</div>
			</template>

			<div class="haitao" v-if="parmas.goodsType == 'overseas'"><img src="@/assets/images/haitao-big.png" alt="" srcset="" /></div>
			<slot name="proCom"></slot>
			<!-- <div class="" v-if="comment"><small class="com-item">6w条评论</small><small class="com-item">99%好评</small></div> -->
		</div>
	</div>
	<!-- </div> -->
	<!-- 横向 -->
</template>

<script>
import cash from 'utils/tool';
import legendImage from 'components/legendImage/legendImage';
import { onshelfProduct } from 'api/externalSearch';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			Money: cash,
			source: '' //用来记录是哪个页面的组件
		};
	},
	props: {
		parmas: Object,
		pic: String,
		name: String,
		money: Number,
		isShowDis: {
			type: Boolean,
			default: true
		},
	},
	mounted() {},
	watch: {
		parmas: {
			handler(newVal, oldVal) {
			    if (newVal) {
					// 如果是onshelf页面上引用该组件
					if (this.$route.name == 'onshelf') {
						this.source = 'onshelf'
					}
			    }
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		myEvent() {
			this.$emit('myEvent', this.parmas);
		},
		toShelf(parmas) {
			this.$dialog
				.confirm({
					title: '是否要上架该商品'
				})
				.then(() => {
					onshelfProduct(parmas.jdSkuId).then(res => {
						if (res.status != 1) {
							this.$toast(res.msg);
							return;
						}
						this.$set(parmas, 'selected', true)
						this.$set(parmas, 'prodId', res.result.prodId)
						this.$router.push({
							name: 'tranferPage',
							query: {
								goodsInfoId: res.result.prodId
							}
						})
					})
				})
				.catch(() => {
					// on cancel
				});
		},
	},
	computed: {
		...mapState(['themes']),
		butText() {
			if(!this.parmas.onlineConfine) return '无法上架'
			if(this.parmas.selected) return '已上架'
			return '我要上架'
		}
	},
	components: {
		legendImage
	}
};
</script>
<style lang="stylus" scoped>
    .pro-info {
        position: relative;
        .haitao {
            position: absolute;
            top: 0;
            left: 0px;
            width: 40px;
            height: 40px;
            img  {
                width:100%;
                height:100%;
                border-radius: 5px 0 0 0;
            }
        }
		.pro-price {
			display flex;
			align-items: center;
			justify-content: space-between;
			.cat {
				width: 20px;
				height: 20px;
				display: inline-block;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
    }
    
</style>